<template>
  <div class="flex w-full mb-6 overflow-hidden" :class="isSend ? 'right' : 'left'">
    <TextComponent
      :text="item.content"
      :inversion="isSend"
      class="text-component"
    ></TextComponent>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from "vue";
import TextComponent from "./Text.vue";

const testText = "__markdown-it__ rulezz!";

const props = defineProps({
  item: {
    type: Object,
  },
});

const isSend = computed(() => {
  return props.item.messageDirection === "send";
});
</script>

<style lang="less" scoped>
.text-component {
  float: right;
}

.left {
  flex-direction: column;
  align-items: flex-start;
}

.right {
  flex-direction: column;
  align-items: flex-end;
}
</style>
